<template>
	<div class="content">
		<el-dialog title=" " :visible.sync="dialogVisible" width="93%">
			<div class="conBox">
				
			<div class="conTitle">
				{{$t('h_taskBox.title1')}}
			</div>
			<div class="jindubox">
				<div class="CcgW_iwO3imaCEFBHG_0">
					<div class="eLabjcpw_vhPD57L8zy3" style="width: 0%;"></div>
				</div>
				<ul class="AjMqHRvfkiCzySzN2ATl">
					<li class="Xmvuu2C1TX6WfCwG_DRC"></li>
					<li class="HDNTMz0u4Aa0Wp8u_Hpi">
						<div class="ZGxqmY__AbDoaLYK_EKw" @click="changeshowtips(1)">
							<img src="../assets/images/yh/icon.png" alt="">
						</div>
						<div class="CAVS57DMPt_zHgplmpTi">100</div>
						<div v-if="showtips == 1" class="p7Gegzxy1YbtFVaIZ4Zw" style="left: -139%; top: -54px; transform-origin: 50% 52px;">
							<div class="ant-popover-content">
								<div class="ant-popover-arrow"></div>
								<div class="ant-popover-inner">
									<div>
										<div class="ant-popover-inner-content">	{{$t('h_taskBox.title2')}} <span>8</span> 	{{$t('h_taskBox.title3')}} <br> {{$t('h_taskBox.title4')}} <span>3</span> {{$t('h_taskBox.title5')}}</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="HDNTMz0u4Aa0Wp8u_Hpi">
						<div class="ZGxqmY__AbDoaLYK_EKw" @click="changeshowtips(2)">
							<img src="../assets/images/yh/icon.png" alt="">
						</div>
						<div class="CAVS57DMPt_zHgplmpTi">300</div>
						<div v-if="showtips == 2" class="p7Gegzxy1YbtFVaIZ4Zw" style="left: -139%; top: -54px; transform-origin: 50% 52px;">
							<div class="ant-popover-content">
								<div class="ant-popover-arrow"></div>
								<div class="ant-popover-inner">
									<div>
										<div class="ant-popover-inner-content">	{{$t('h_taskBox.title2')}} <span>18</span> 	{{$t('h_taskBox.title3')}} <br> {{$t('h_taskBox.title4')}} <span>3</span> {{$t('h_taskBox.title5')}}</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="HDNTMz0u4Aa0Wp8u_Hpi">
						<div class="ZGxqmY__AbDoaLYK_EKw" @click="changeshowtips(3)">
							<img src="../assets/images/yh/icon.png" alt="">
						</div>
						<div class="CAVS57DMPt_zHgplmpTi">600</div>
						<div v-if="showtips == 3" class="p7Gegzxy1YbtFVaIZ4Zw" style="left: -139%; top: -54px; transform-origin: 50% 52px;">
							<div class="ant-popover-content">
								<div class="ant-popover-arrow"></div>
								<div class="ant-popover-inner">
									<div>
										<div class="ant-popover-inner-content">	{{$t('h_taskBox.title2')}} <span>38</span> 	{{$t('h_taskBox.title3')}} <br> {{$t('h_taskBox.title4')}} <span>3</span> {{$t('h_taskBox.title5')}}</div>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li class="HDNTMz0u4Aa0Wp8u_Hpi">
						<div class="ZGxqmY__AbDoaLYK_EKw" @click="changeshowtips(4)">
							<img src="../assets/images/yh/icon.png" alt="">
						</div>
						<div class="CAVS57DMPt_zHgplmpTi">1000</div>
						<div v-if="showtips == 4" class="p7Gegzxy1YbtFVaIZ4Zw" style="left: -139%; top: -54px; transform-origin: 50% 52px;">
							<div class="ant-popover-content">
								<div class="ant-popover-arrow"></div>
								<div class="ant-popover-inner">
									<div>
										<div class="ant-popover-inner-content">	{{$t('h_taskBox.title2')}} <span>88</span> 	{{$t('h_taskBox.title3')}} <br> {{$t('h_taskBox.title4')}} <span>3</span> {{$t('h_taskBox.title5')}}</div>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
				<div class="WYuhLp0mMdrmckTp0vbY">
					<div class="ryd8ArFT5jw6cF256cMw">{{$t('h_taskBox.title6')}}</div>
					<div class="LSwOjSisZch45p1ILeaX">
						<i style="margin-right: 0.1rem;display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 22.851 24" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#comm_icon_shy--sprite"></use>
							</svg>
						</i>
						<div style="font-size: 0.26rem; line-height: 1.2; width: 100%;">0</div>
					</div>
				</div>
				<div class="eAqnKkBJdyMZZ_6wT8uM">
					<div class="G7ZtaN0qW4fvXtxVMiI_">
						{{$t('h_taskBox.title7')}}：
						<span>3{{$t('h_taskBox.title8')}}2{{$t('h_taskBox.title9')}}58{{$t('h_taskBox.title10')}}23{{$t('h_taskBox.title11')}}</span>
					</div>
				</div>
			</div>
			<div class="con">
				<div class="left">
					<div class="litem1Tow" :class="selecttype == 1 ? 'litem2Tow':''" @click="changeSelType('1')">{{$t('h_taskBox.title12')}}
					</div>
					<div class="litem1Tow" :class="selecttype == 2 ? 'litem2Tow':''" @click="changeSelType('2')">{{$t('h_taskBox.title13')}}
					</div>
					<div class="litem1">{{$t('h_taskBox.title14')}}</div>
					<div class="litem2" @click="goreceive">{{$t('h_taskBox.title15')}}</div>
				</div>
				<div class="right" ref="outerDom" v-if="selecttype == 1">
					<div class="ul" style="width: 100%;">
						<div class="my-scrollbar my-scrollbar-none" style="width: 100%; height: 100%;">
							<div class="my-scrollbar-wrap my-scrollbar-wrap-y">
								<div class="my-scrollbar-content">
									<div class="_7MmLs_h7paP95qs65ko">
										<ul class="nqZoMAOa9VoBq0DesDWl">
											<li>
												<div class="VUy6m5HGRRX5D9px4aDm">
													<div class="seivOAypKS3Yw9Rn3hI9">{{$t('h_taskBox.title16')}}10，{{$t('h_taskBox.title17')}}1.00
														<div>{{$t('h_taskBox.title18')}}：USDT-Trc20
															<span class="a7kKVFMt7IcMdx7bFSPA">{{$t('h_taskBox.title19')}}</span>
														</div>
													</div>
													<button type="button"
														class="ant-btn lNN1n3xmTNF7b6i1nG80 tbneT0bs0pWuU_T1Byqz">
														<div style="font-size: 0.22rem; line-height: 1.2; width: 100%;">
															{{$t('h_taskBox.title20')}}</div>
													</button>
												</div>
												<div>
													<div class="VUy6m5HGRRX5D9px4aDm">
														<div class="_Xh4S8uJ8rtshK0NDPr8 UJL0ZSBMN2iKqEiJvcyz">
															<div class="hg3pWm3VA8nZxTi_potS"><span>0/10</span></div>
														</div>
														<div class="WzttGCRh1zz4Ew8j8EDv">
															<div class="HfvXXf9iXxGtgzlM8whR XGEOwGXgDL9a2SebPqvj"><i
																	style="display: inline-flex; justify-content: center; align-items: center;"><svg
																		viewBox="0 0 24 24" width="1em" height="1em"
																		fill="currentColor" aria-hidden="true"
																		focusable="false">
																		<use
																			xlink:href="/icons/icon.svg#comm_icon_sqb_cny--sprite">
																		</use>
																	</svg></i><span>1</span></div>
															<div class="FiPDewz_FHIbbkU6lG2g HI77FtRdvO4aiGOC1sgp"><i
																	style="display: inline-flex; justify-content: center; align-items: center;">
																	<svg viewBox="0 0 22.851 24" width="1em"
																		height="1em" fill="currentColor"
																		aria-hidden="true" focusable="false">
																		<use
																			xlink:href="/icons/icon.svg#comm_icon_shy--sprite">
																		</use>
																	</svg></i><span>1</span></div>
														</div>
													</div>
												</div>
											</li>
										</ul>
										<div class="eHg0yRf1S2LNSSMGVlpa">
											<div>
												<p class="UwyNP8CcObxeFMJmAhCj">{{$t('h_taskBox.title21')}}</p>
												<p>{{$t('h_taskBox.title22')}}<br>{{$t('h_taskBox.title23')}}<br>{{$t('h_taskBox.title24')}}
												<br>{{$t('h_taskBox.title25')}}<br>{{$t('h_taskBox.title26')}}<br>{{$t('h_taskBox.title34')}}
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="my-scrollbar-bar my-scrollbar-vertical my-scrollbar-bar-v-bar" style="">
								<div class="my-scrollbar-thumb"
									style="background-color: var(--theme-scroll-bar-bg-color); transform: translateY(0%); height: 33.7862%;">
								</div>
								<div class=""></div>
							</div>
						</div>
					</div>
				</div>
				<div class="right" ref="outerDom" v-if="selecttype == 2">
					<div class="ul" style="width: 100%;">
						<div class="my-scrollbar my-scrollbar-none" style="width: 100%; height: 100%;">
							<div class="my-scrollbar-wrap my-scrollbar-wrap-y">
								<div class="my-scrollbar-content">
									<div class="_7MmLs_h7paP95qs65ko">
										<ul class="nqZoMAOa9VoBq0DesDWl shenmiul">
											<li>
												<div class="rShVbY9NP0srU4ymrIy5">
													<span>{{$t('h_taskBox.title27')}}1{{$t('h_taskBox.title28')}}</span>
												</div>
												<div class="VUy6m5HGRRX5D9px4aDm" style="margin-top: 15px;">
													<div class="seivOAypKS3Yw9Rn3hI9">{{$t('h_taskBox.title29')}}100，{{$t('h_taskBox.title30')}}3.00
														<div>{{$t('h_taskBox.title31')}}
															<span class="a7kKVFMt7IcMdx7bFSPA">{{$t('h_taskBox.title19')}}</span>
														</div>
													</div>
													<button type="button"
														class="ant-btn lNN1n3xmTNF7b6i1nG80 tbneT0bs0pWuU_T1Byqz">
														<div style="font-size: 0.22rem; line-height: 1.2; width: 100%;">
															{{$t('h_taskBox.title20')}}</div>
													</button>
												</div>
												<div>
													<div class="VUy6m5HGRRX5D9px4aDm">
														<div class="_Xh4S8uJ8rtshK0NDPr8 UJL0ZSBMN2iKqEiJvcyz">
															<div class="hg3pWm3VA8nZxTi_potS"><span>0/100</span></div>
														</div>
														<div class="WzttGCRh1zz4Ew8j8EDv">
															<div class="HfvXXf9iXxGtgzlM8whR XGEOwGXgDL9a2SebPqvj"><i
																	style="display: inline-flex; justify-content: center; align-items: center;"><svg
																		viewBox="0 0 24 24" width="1em" height="1em"
																		fill="currentColor" aria-hidden="true"
																		focusable="false">
																		<use
																			xlink:href="/icons/icon.svg#comm_icon_sqb_cny--sprite">
																		</use>
																	</svg></i><span>3</span></div>
															<div class="FiPDewz_FHIbbkU6lG2g HI77FtRdvO4aiGOC1sgp"><i
																	style="display: inline-flex; justify-content: center; align-items: center;">
																	<svg viewBox="0 0 22.851 24" width="1em"
																		height="1em" fill="currentColor"
																		aria-hidden="true" focusable="false">
																		<use
																			xlink:href="/icons/icon.svg#comm_icon_shy--sprite">
																		</use>
																	</svg></i><span>3</span></div>
														</div>
													</div>
												</div>
											</li>
											<li>
												<div class="rShVbY9NP0srU4ymrIy5 bg">
													<span>{{$t('h_taskBox.title27')}}2{{$t('h_taskBox.title28')}}</span>
												</div>
												<div class="VUy6m5HGRRX5D9px4aDm" style="margin-top: 15px;">
													<div class="seivOAypKS3Yw9Rn3hI9" style="color: var(--theme-alt-neutral-2);">{{$t('h_taskBox.title32')}}</div>
												</div>
												<div>
													<div class="VUy6m5HGRRX5D9px4aDm">
														<div class="_Xh4S8uJ8rtshK0NDPr8 UJL0ZSBMN2iKqEiJvcyz">
															<div class="hg3pWm3VA8nZxTi_potS"><span>0/0</span></div>
														</div>
													</div>
												</div>
											</li>
											<li>
												<div class="rShVbY9NP0srU4ymrIy5 bg">
													<span>{{$t('h_taskBox.title27')}}3{{$t('h_taskBox.title28')}}</span>
												</div>
												<div class="VUy6m5HGRRX5D9px4aDm" style="margin-top: 15px;">
													<div class="seivOAypKS3Yw9Rn3hI9" style="color: var(--theme-alt-neutral-2);">{{$t('h_taskBox.title32')}}</div>
												</div>
												<div>
													<div class="VUy6m5HGRRX5D9px4aDm">
														<div class="_Xh4S8uJ8rtshK0NDPr8 UJL0ZSBMN2iKqEiJvcyz">
															<div class="hg3pWm3VA8nZxTi_potS"><span>0/0</span></div>
														</div>
													</div>
												</div>
											</li>
											<li>
												<div class="VUy6m5HGRRX5D9px4aDm">
													<div class="seivOAypKS3Yw9Rn3hI9" style="color: var(--theme-alt-neutral-2);">{{$t('h_taskBox.title33')}}</div>
												</div>
											</li>
										</ul>
										<div class="eHg0yRf1S2LNSSMGVlpa">
											<div>
												<p class="UwyNP8CcObxeFMJmAhCj">{{$t('h_taskBox.title21')}}</p>
												<p>{{$t('h_taskBox.title22')}}<br>{{$t('h_taskBox.title23')}}<br>{{$t('h_taskBox.title24')}}
												<br>{{$t('h_taskBox.title25')}}<br>{{$t('h_taskBox.title26')}}<br>{{$t('h_taskBox.title34')}}
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="my-scrollbar-bar my-scrollbar-vertical my-scrollbar-bar-v-bar" style="">
								<div class="my-scrollbar-thumb"
									style="background-color: var(--theme-scroll-bar-bg-color); transform: translateY(0%); height: 33.7862%;">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
			<div class="QzRd3YqTnYxG8Latq8fW" @click="closePop" >
				<img src="@/assets/images/yh/main.f9fa3765529e3b5b42fa.png" alt="">
			</div>
		</el-dialog>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				selecttype: 1,
				// dialogVisible: false
				dialogVisible: true,
				
				showtips:0
			}
		},
		props:{
			selecttabTo:{
				type:Number,
				default:0
			}
		},
		onLoad() {

		},
		methods: {
			closePop(){
				this.dialogVisible=false;
				this.$emit("seltabTo",this.selecttabTo)
			},
			changeSelType(e) {
				this.selecttype = e;
			},
			goreceive() {
				this.$router.push('../../preferential/receive')
			},
			
			changeshowtips(e){
				if(this.showtips == 0){
					this.showtips = e
				}else if(this.showtips != e && this.showtips != 0){
					this.showtips = e
				}else{
					this.showtips = 0
				}
			}
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.conBox{
		width: 100%;
		padding: 0 10px;
		padding-top: 10px;
		box-sizing: border-box;
		background-color: #0e131b;
		border: 0.01rem solid var(--theme-color-line);
		border-radius: .2rem;
	}
	.conTitle{
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: .3rem;
		    font-weight: 700;
	}
	.con {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
	}
	.QzRd3YqTnYxG8Latq8fW {
    width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 0.3rem;
} .QzRd3YqTnYxG8Latq8fW img {
    width: 30px;
	height:30px;
}
/deep/.el-dialog__header {
    padding: 0;
}
/deep/.el-dialog__body {
   padding: 0;
}
	/deep/.el-dialog__headerbtn .el-dialog__close {
		display: none;
	}

	/deep/.el-dialog {
		background: transparent;
	}

	.left {
		height: auto;
	}

	.litem {
		width: 100%;
		height: 52.5px;
		position: relative;
		margin-top: 10px;
	}

	.litem:first-child {
		margin-top: 0;
	}

	.litem>img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.litembox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		padding: 6px 5px 0 5px;
		color: rgb(173, 182, 196);
	}

	.litembox.color {
		color: #fff;
	}

	.litembox>.icon {
		display: block;
		margin: 0 auto;
		width: 22px;
		height: 18px;
		font-size: .44rem;
	}

	.litembox>div {
		text-align: center;
		font-size: 12px;
	}

	.litem1 {
		width: 60px;
		height: 25px;
		padding: 0 2.5px;
		line-height: 25px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: rgb(153, 153, 153);
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
	}

	.litem2 {
		width: 60px;
		height: 25px;
		padding: 0 2.5px;
		line-height: 25px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: rgb(0, 93, 254);
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
	}

	.litem1Tow {
		width: 80px;
		height: 30px;
		padding: 0 2.5px;
		line-height: 30px;
		text-align: center;
		font-size: 12px;
		color: #ffff;
		background-color: #1c8ac1;
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 10px;
		box-shadow: var(--theme-aside-box-shadow);
		color: var(--theme-text-color-side-tabs);
	}

	.litem2Tow {
		background-color: rgb(0, 93, 254);
		color: var(--theme-primary-font-color);
	}

	.right {
		flex: 1;
		/* height: calc(100vh - 1.2rem); */
		margin-left: 10px;
		padding-bottom: .2rem;
		overflow-y: scroll;
	}

	.ul {
		width: 102%;
		height: auto;
		overflow-y: auto;
	}

	.ritem {
		width: 100%;
		padding: 5px;
		height: 127.5px;
		margin-bottom: 10px;
		background-color: rgb(21, 29, 41);
		border-radius: 5px;
	}

	.ritem img {
		width: 100%;
		height: 100%;
	}

	/* 返回顶部样式 */
	.scrollBox {
		position: fixed;
		bottom: 1.44rem;
		right: 0.1rem;
		width: 1.1rem;
		height: 50px;
		border-radius: 0.14rem;
		padding: 0.14rem 0.05rem 0.04rem;
		z-index: 99;
		text-align: center;
		box-shadow: 0.02rem 0 0.06rem 0 rgb(0 0 0 / 10%);
		cursor: pointer;
		background-color: var(--theme-top-nav-bg);;
		border: .01rem solid var(--theme-color-line);
	}

	.scrollBox .icon {
		font-size: .3rem;
		height: 0.38rem;
		margin: 0 auto;
		margin-bottom: 0.04rem;
		width: 0.38rem;
		background-color: var(--theme-primary-color);
		border-radius: 50%;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scrollBox div {
		font-size: 12px;
		color: rgb(85, 101, 126);
	}

	.con1header {
		width: 100%;
		height: 0.7rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.2rem;
	}

	.con1header .text {
		font-size: .22rem;
		color: var(--theme-alt-neutral-2);
	}

	.fanshuiritem {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 0.12rem;
		font-size: .2rem;
		margin-bottom: 0.2rem;
		min-height: 1.1rem;
		padding: 0.2rem 0 0.2rem 0.1rem;
	}

	.fanshuiritem .left {
		width: 0.7rem;
		margin-top: -0.1rem;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: rgb(173, 182, 196);
	}

	.fanshuiritem .left img {
		width: 0.5rem;
		height: 0.5rem;
	}

	.fanshuiritem .center {
		flex: 1;
		padding-left: 0.1rem;
		color: var(--theme-alt-neutral-2);
	}

	.fanshuiritem .center .up {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.14rem;
	}

	.fanshuiritem .center .up .righttext {
		flex-shrink: 0;
		padding-left: 0.14rem;
		padding-right: 0.06rem;
		width: 1.76rem;
		text-align: left;
	}

	.fanshuiritem .icon {
		color: var(--theme-color-line);
		padding: 0 0.18rem 0 0;
	}

	.fanshuiritem .icon svg {
		display: block;
		height: 0.26rem;
		transform: rotate(180deg);
		width: 0.26rem;
	}

	/* 2 */
	dl,
	ol,
	ul {
		margin-bottom: 0.2em;
		margin-top: 0;
	}

	ul {
		list-style: none;
	}

	.nqZoMAOa9VoBq0DesDWl li {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		-webkit-box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		display: -ms-flexbox;
		margin-top: 0.2rem;
		padding: 0.15rem 0.1rem 0.18rem;
		position: relative;
	}

	.nqZoMAOa9VoBq0DesDWl li:first-child {
		margin-top: 0;
	}

	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0.05rem 0.2rem 0.15rem 0.05rem;
	}
	.VUy6m5HGRRX5D9px4aDm{
		margin-right: 0;
	}

	._Xh4S8uJ8rtshK0NDPr8 .hg3pWm3VA8nZxTi_potS {
		color: var(--theme-text-color-process-text);
		font-size: .16rem;
		line-height: .22rem;
		width: 84px;
		height: 10px;
		background-color: #53677d;
		border-radius: 5px;
		text-align: center;
	}

	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm .seivOAypKS3Yw9Rn3hI9 {
		color: var(--theme-text-color-darken);
		font-size: .2rem;
		line-height: 1.2;
	}

	.a7kKVFMt7IcMdx7bFSPA {
		color: var(--theme-primary-color);
	}

	.nqZoMAOa9VoBq0DesDWl .VUy6m5HGRRX5D9px4aDm .seivOAypKS3Yw9Rn3hI9 {
		min-height: 0.4rem;
	}

	._Xh4S8uJ8rtshK0NDPr8,
	._Xh4S8uJ8rtshK0NDPr8 .fanXMnrLePJ81NLxoAq8 {
		height: 0.2rem;
	}

	._Xh4S8uJ8rtshK0NDPr8 .fanXMnrLePJ81NLxoAq8 {
		background-color: var(--theme-secondary-color-success);
		border-radius: 0.2rem;
		height: 0.2rem;
		text-indent: -99.99rem;
	}


	.nqZoMAOa9VoBq0DesDWl .WzttGCRh1zz4Ew8j8EDv {
		bottom: 0.18rem;
		right: 0.12rem;
		display: flex;
		align-items: center;
	}

	.nqZoMAOa9VoBq0DesDWl .FiPDewz_FHIbbkU6lG2g,
	.nqZoMAOa9VoBq0DesDWl .HfvXXf9iXxGtgzlM8whR {
		-ms-flex-align: center;
		align-items: center;
		display: -ms-flexbox;
		display: flex;
		font-size: .16rem;
	}

	.XGEOwGXgDL9a2SebPqvj {
		color: var(--theme-secondary-color-finance);
	}

	.HI77FtRdvO4aiGOC1sgp {
		color: var(--theme-secondary-color-success);
	}

	.nqZoMAOa9VoBq0DesDWl .FiPDewz_FHIbbkU6lG2g {
		margin-left: 0.3rem;
	}

	.lNN1n3xmTNF7b6i1nG80.tbneT0bs0pWuU_T1Byqz {
		background-color: var(--theme-primary-color) !important;
		color: var(--theme-primary-font-color) !important;
	}

	.lNN1n3xmTNF7b6i1nG80 {
		font-size: .2rem;
		height: 0.5rem;
		width: 1.2rem;
	}

	.ant-btn,
	.ant-select-dropdown {
		border-radius: 0.14rem;
	}

	.eHg0yRf1S2LNSSMGVlpa {
		background-color: var(--theme-main-bg-color);
		border-radius: 0.1rem;
		-webkit-box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		color: var(--theme-text-color);
		font-size: .18rem;
		line-height: 1.56;
		padding: 0.25rem 0.2rem;
	}

	.eHg0yRf1S2LNSSMGVlpa {
		font-size: .22rem;
		line-height: 1.45;
	}

	.eHg0yRf1S2LNSSMGVlpa p {
		/* margin-top: 0.05rem; */
	}

	.UwyNP8CcObxeFMJmAhCj {
		color: var(--theme-text-color-darken);
	}
	
	.jindubox{
		height: 2.17rem;
		width: 100%;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 0.1rem;
		position: relative;
	}
	.CcgW_iwO3imaCEFBHG_0{
		background-color: var(--theme-color-line);
		border-radius: 0.05rem;
		height: 0.1rem;
		left: 0.48rem;
		position: absolute;
		right: 0.65rem;
		top: 0.5rem;
	}
	.eLabjcpw_vhPD57L8zy3{
		background-color: #04be02;
		border-radius: 0.05rem;
		height: 0.1rem;
	}
	.AjMqHRvfkiCzySzN2ATl{
		align-items: flex-start;
		display: flex;
		justify-content: space-between;
		margin-bottom: 0;
		margin-left: 0.3rem;
		margin-right: 0.3rem;
		padding-top: 0.2rem;
		position: relative;
		z-index: 101;
	}
	.Xmvuu2C1TX6WfCwG_DRC{
		height: 1.12rem;
		position: relative;
		width: 0.36rem;
	}
	li{
		list-style-type: none;
	}
	.Xmvuu2C1TX6WfCwG_DRC:before {
	    background-color: rgba(4,190,2,.5);
	    border-radius: 0.18rem;
	    content: "";
	    height: 0.36rem;
	    left: 0;
	    position: absolute;
	    top: 0.17rem;
	    width: 0.36rem;
	}
	.Xmvuu2C1TX6WfCwG_DRC:after {
	    background-color: rgb(4,190,2);
	    border-radius: 0.08rem;
	    content: "";
	    height: 0.16rem;
	    left: 0.1rem;
	    position: absolute;
	    top: 0.27rem;
	    width: 0.16rem;
	}
	.HDNTMz0u4Aa0Wp8u_Hpi{
		width: 0.7rem;
		position: relative;
	}
	.ZGxqmY__AbDoaLYK_EKw{
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border: 0.01rem solid var(--theme-color-line);
		border-radius: 0.35rem;
		display: flex;
		height: 0.7rem;
		justify-content: center;
		position: relative;
	}
	.ZGxqmY__AbDoaLYK_EKw img{
		width: 0.54rem;
		height: 0.45rem;
		opacity: 1;
		transform: scale(1);
	}
	.CAVS57DMPt_zHgplmpTi{
		color: var(--theme-alt-neutral-2);
		background-color: var(--theme-top-nav-bg);;
		border: 0.01rem solid var(--theme-color-line);
		border-radius: 0.15rem;
		font-size: .25rem;
		height: 0.3rem;
		line-height: .3rem;
		margin-top: 0.12rem;
		text-align: center;
	}
	.p7Gegzxy1YbtFVaIZ4Zw{
		font-feature-settings: "tnum";
		box-sizing: border-box;
		color: rgba(0,0,0,.65);
		cursor: auto;
		font-size: 14px;
		font-variant: tabular-nums;
		font-weight: 400;
		line-height: 1.5;
		list-style: none;
		margin: 0;
		padding: 0;
		padding-bottom: 10px;
		position: absolute;
		text-align: left;
		user-select: text;
		white-space: normal;
		z-index: 1030;
	}
	.ant-popover-arrow{
		width: 8.48528137px;
		display: block;
		height: 8.48528137px;
		position: absolute;
		background-color: var(--theme-top-nav-bg);;
		border-color: #293548!important;
		border-style: solid;
		border-width: 0 0.01rem 0.01rem 0;
		box-shadow: 3px 3px 7px rgb(0 0 0 / 7%);
		bottom: 6.2px;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
	}
	.ant-popover-inner{
		background-color: var(--theme-top-nav-bg);;
		border: thin solid var(--theme-color-line);
		border-radius: 0.1rem;
		box-shadow: 0 0.03rem 0.12rem 0 rgb(0 0 0 / 12%);
	}
	.ant-popover-inner-content{
		padding: 0.06rem 0.16rem;
		width: 2.57rem;
		color: var(--theme-text-color);
		font-size: .2rem;
		line-height: .3rem;
	}
	.ant-popover-inner-content span{
		color: #ffaa09;
	}
	.WYuhLp0mMdrmckTp0vbY{
		margin-left: 0.3rem;
		margin-top: -0.5rem;
	}
	.ryd8ArFT5jw6cF256cMw{
		line-height: .26rem;
		color: var(--theme-alt-neutral-2);
		font-size: .18rem;
		display: -webkit-box;
		width: 1.2rem;
		word-break: break-all;
	}
	.LSwOjSisZch45p1ILeaX{
		align-items: center;
		color: #04be02;
		display: flex;
	}
	.LSwOjSisZch45p1ILeaX svg {
	    height: 0.29rem;
	    width: 0.27rem;
	}
	.eAqnKkBJdyMZZ_6wT8uM{
		display: flex;
		justify-content: center;
	}
	.G7ZtaN0qW4fvXtxVMiI_{
		bottom: 0.26rem;
		font-size: .2rem;
		border: 0.01rem solid var(--theme-color-line);
		border-radius: 0.17rem;
		color: var(--theme-alt-neutral-2);
		height: 0.34rem;
		left: 50%;
		line-height: .32rem;
		padding: 0 0.1rem;
		position: absolute;
		text-align: center;
		transform: translateX(-50%);
		white-space: nowrap;
	}
	.G7ZtaN0qW4fvXtxVMiI_ span{
		color: var(--theme-text-color);
	}
	.HfvXXf9iXxGtgzlM8whR svg,.HI77FtRdvO4aiGOC1sgp svg{
	    height: 0.24rem;
	    margin-right: 0.05rem;
	    width: 0.24rem;
	}
	.rShVbY9NP0srU4ymrIy5{
		border-radius: 0.1rem;
		height: 0.4rem;
		left: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 70%;
	}
	.rShVbY9NP0srU4ymrIy5 span{
		background-color: #73befd;
		border-radius: 0.23rem;
		color: #fff;
		font-size: .12rem;
		font-weight: 700;
		left: -0.23rem;
		line-height: .3rem;
		padding-left: 0.29rem;
		padding-right: 0.14rem;
		padding-top: 0.23rem;
		position: absolute;
		top: -0.23rem;
	}
	.rShVbY9NP0srU4ymrIy5.bg span{
		background-color: var(--theme-alt-neutral-2);
	}
	.rShVbY9NP0srU4ymrIy5>span:after {
	    border-top: 0.11rem solid transparent;
	    border-color: #73befd transparent transparent;
	    border-style: solid;
	    border-width: 0.16rem 0.11rem 0.11rem 0;
	    content: "";
	    height: 0;
	    position: absolute;
	    right: -0.08rem;
	    width: 0;
	}
	.rShVbY9NP0srU4ymrIy5.bg>span:after {
	    border-top-color: var(--theme-alt-neutral-2);
	}
	.shenmiul{
		background-color: var(--theme-top-nav-bg);;
		border-radius: 0.1rem;
		margin-bottom: 0.2rem;
		position: relative;
	}
	.shenmiul li{
		margin-top: 0;
		background-color: transparent;
	}
	.shenmiul li:after {
	    background-color: rgb(41, 53, 72);
	    bottom: 0;
	    content: "";
	    display: block;
	    height: 0.01rem;
	    position: absolute;
		box-sizing: border-box;
	}
	.shenmiul li:first-child:after {
	    left: calc(50% - 2.3rem);
	    width: 4.6rem;
	}
	.shenmiul li:nth-last-child(2):after {
	    left: calc(50% - 2.3rem);
	    width: 4.6rem;
	}
</style>